Rich Editor Documentation

Rich Editor (RE) is a browser-based online WYSIWYG html editor. The editor is to be used in content management systems or just instead of <TEXTAREA> tags in forms to create/edit html formatted text and whole html pages.

100% script (javascript and php). Easy to install. No additional Java Applets or ActiveX components are required! Works with Internet Explorer 5.x+ only. MSIE 6.x is recommended. Implemented as a PHP class. Multiple instances of RE on the same page are supported.

No knowledge of HTML required. Advanced work with images, including file uploading, tables, links, stylesheets, flash and more!

Active and simple modes of the editor. Adjustable toolbar. Work with server-side files and folders. Colored source code. Multilanguage support. And more!

2. Features

General

100% DHTML, JavaScript and PHP code
No slow Java applets or ActiveX components, no plugins required
No programming skills required
Interface is similar to Microsoft Word
Edit content in WYSIWYG and source code mode
Implemented as a PHP class - easy to use in scripts, in content management systems
Multiple editors -- create as many editors on the same page, as you need, size of scripts loaded is the same
Can be used instead <TEXTAREA> tags in forms
Possible to edit not only parts of html documents, but the whole web pages too!
You can change properties of html page you modify with the editor
If user is not using IE 5.0 or above, <TEXTAREA> tag is shown
Work with remote files and remote directory structure
Upload local files from client computer (no FTP knowledge required)
Active mode -- button, pressing on which will take no effect, becomes inactive
Simple mode (adjustable). Restricted number of buttons drawn -- useful for novice users
Full screen mode. Editor expands on whole browser client area
Html snippets (custom html code). In the snippet dialog window user can see preview of snippet selected before pasting it in document
On-rightclick context menu
Multilanguage support
You can re-brand it to offer as a part of your commercial product
If you need something else, write us. Most popular features are added first!

Text

Toolbar buttons' state corresponds to formatting of text in the current cursor position
Select paragraph, font type, font size and formatting (bold, italic, underline, strikethrough, superscript and subscript), remove formatting
Change foreground and background color of text, using color picker
Indent and outdent
Ordered and unordered lists
Text alignment
Cut, copy and paste text
Advanced work with hyperlinks, including targets. Create hyperlinks to files at server; upload files from your computer. Select text or controls to create hyperlinks.
Full stylesheet support. Create style class definitions and/or insert links to *.css files inside RE!
Default stylesheet files. You can set any number of *.css file to be loaded in editor by default. It is useful when you edit parts of html pages, so you do not need include style class definitions in each html text you edit separately to see them in wysiwyg mode
Insert special chars
Paste text from Microsoft Word

Tables

Advanced work with tables. Insert and edit tables and table cells. Set border, alignment, cellpadding, cellspacing, bgcolor, background image and more!
Insert/delete columns, rows or cells, merge/split cells
Right click on table border or inside table cell to edit them
Show invisible table borders feature

Image&Flash

Advanced work with images/flash. Insert and edit images/flash, upload new images/flash files from client's computer; set image width, height, alt, border and more!
Right click on image/flash to edit
Preview local and server-side images/flash

Note: if you do not see local flash preview, please, install the latest version of flash player from macromedia.com.

MSIE 6.0 is recommended!

Forms

You can create and edit forms and form elements. Text field, text area, buttons, hidden field, checkbox and radio button elements are supported
Right click inside a form or on a form element to edit them
Show invisible form borders feature

Languages supported

Dutch
English
Japanese
Russian

3. Requirements

Web browser: Internet Explorer 5.0 or above (otherwise a normal <TEXTAREA> tag appears). Internet Explorer 6.0 is recommended
JavaScript: must be enabled
Web Server: Apache Web Server
Server Scripting Language: PHP 4.0 or above
You must have rights to execute PHP scripts in your files and write in your directories at server

4. Installation&Using

You must have possibility to run PHP scripts inside your files and rights to write in your directories at server!

Copy directory 'class' on server. There must be access to this directory through an URL.
Add at the top of file, where you want RE to be used, code of the form:

<?php
	$class_path = "path to 'class' folder";
	require_once($class_path."class.rich.php");
?>

"path to 'class' folder" is a string with path to folder 'class', where RE files are, e.g. "class/", if your script and this folder are in the same folder.

Insert the following two strings inside tag <HEAD>:

<link rel="StyleSheet" type="text/css" href="<?php echo $class_path; ?>rich_files/rich.css">
<script language="JavaScript" src="<?php echo $class_path; ?>rich_files/rich.js"></script>

Code to create RE is of the form:

<?php
	$editor = new rich($caption, $name, $value, $width, $height, $files_path,
			$files_url, $page_mode, $absolute_path);
	$editor->draw();
?>

$caption is a string, appearing before RE in page (caption of editor),

$name is name of the textarea element, which is used to send edited text through forms (must be unique, if you create several editors),

$value is a string with initial content of the editor (can be empty),

$width is width of the editor (can be in absolute values or in %s),

$height is height of the editor (can be in absolute values or in %s),

$files_path is a string with path to top directory for remote and uploaded files FROM directory 'class/'!

$files_url is string with url to top directory (directory $files_path) for remote and uploaded files,

$page_mode - set it to true to edit the whole pages, otherwise can be omitted.

$absolute_path

true

Note: if $absolute_path is set to false, $files_path and $files_url should specify path to folder for uploading relative to site root. I.e. if folder for uploading is 'http://www.yoursite.com/files/upload/', these variables should be set to '/files/upload/'. In this case, all urls in the editor will not depend on name of site domain.

Add 'save_in_textarea_all' function in onsubmit event handler, e.g:

<form action="" method="post" onsubmit="save_in_textarea_all();">

Contents of RE editors can be accessed in scripts after submitting forms containing them by names, pointed in corresponding variables $name.

RE appears on page in the place, where method draw() is called.

Simple mode

To handle RE Simple mode add a sring of the form

	$editor->simple_mode($mode);

before draw() method call.

If $mode is true or omitted, the simple mode is on, otherwise -- off.

To hide some buttons use the method

	$editor->hide_tb($item, $mode);

before draw() method call.

Here

$item is a string defining a button (or a group of buttons) to be hidden/shown,

$mode -- set it to true to hide buttons, defined by $item, or can be ommited, if set to false the $item buttons are shown at RE toolbar.

Using the hide_tb() function it is possible to hide some buttons of RE toolbar. Besides it, you can set up your own "simple mode" adding or deleting the function calls inside simple_mode() function.

The possible values of $item:

'clipboard' -- cut, copy and paste buttons;

'history' -- undo and redo buttons;

'text' -- bold, italic, underline, strikesrough, superscript and subscript buttons;

'align' -- align left, center, right and justify buttons;

'list' -- ordered and unordered list buttons;

'indent' -- indent and outdent buttons;

'hr' -- horizontal line buttons;

'remove_format' -- remove formatting button;

'table' -- create table, insert/delete row, insert/delete column buttons;

'adv_table' -- insert/delete cell, merge cells, split cell buttons (shown only if 'table' buttons are not hidden);

'paragraph' -- paragraph select;

'font' -- font select;

'style' -- stylesheet class select;

'size', -- font size select;

'color',-- forecolor and backcolor buttons;

'image' -- create image button;

'flash' -- create flash button;

'link' -- create hyperlink button;

'paste_word' -- paste text from MS Word button;

'switch_borders' -- show invisible table borders button;

'special_chars' -- insert special char button;

'form' -- form elements' buttons;

'snippets' -- insert custom html code button;

'page_properties' -- page properties button.

Active mode

To handle RE Active mode add a sring of the form

	$editor->active_mode($mode);

before draw() method call.

If $mode is true or omitted the active mode is on, otherwise -- off.

Default stylesheets

To set default stylesheet files use the following function:

	$editor->set_default_stylesheet($style_path);

before draw() method call.

Here

$style_path is a path to stylesheet file (or array of such paths) from the dir where script creating the editor is

Snippets

To define html snippets to be used in the editor use the following function:

	$editor->set_snippets($snippets);

before draw() method call.

Here

$snippets is an array (or array of such arrays) of the form

	array('name' => 'name of the snippet', 'code' => 'code of the snippet')

HTML tags are available inside html snippets

Language

To set a desired language use the following function:

	$editor->set_lang($lang);

before draw() method call.

Here

$lang is code of the language.

Supported languages (language codes):

Dutch (nl)
English (en) -- default
Japanese (ja)
Russian (ru)

To add a new language to the editor, create files 'rich_lang_{code}.inc.php' and 'help_{code}.php' with texts in this language and copy them in folder 'lang'. Here, {code} is a code of the new language.

The new language will be available by the code {code} in set_lang() method.

5. Examples

Note: full description of RE installation and using see in INSTALLATION&USING section and in file example.php. This is examples of RE php class using only.

Example1. Default mode

	$editor = new rich('Example #1', 'rich_name', 'initial_content',
		'100%', '100%', 'files/', 'http://www.yourdomain.com/files/');
	$editor->draw();

Example2. Active mode

	$editor = new rich('Example #2', 'rich_name', 'initial_content',
		500, 500, 'files/', 'http://www.yourdomain.com/files/');

	$editor->active_mode();

	$editor->draw();

Example3. Simple mode

	$editor = new rich('Example #3', 'rich_name', 'initial_content',
		'100%', 300, 'files/', 'http://www.yourdomain.com/files/');

	$editor->simple_mode();

	$editor->draw();

Example4. Adjustable toolbar (turn off image and table buttons)

	$editor = new rich('Example #4', 'rich_name', 'initial_content',
		500, '80%', 'files/', 'http://www.yourdomain.com/files/');

	$editor->hide_tb('image');
	$editor->hide_tb('table');

	$editor->draw();

Example5. Default stylesheets

	$editor = new rich('Example #5', 'rich_name', 'initial_content',
		'100%', '100%', 'files/', 'http://www.yourdomain.com/files/');

	//to load style1.css and style2.css you can write

	$editor->set_default_stylesheet('style1.css');
	$editor->set_default_stylesheet('style2.css');

	/*or (the same result)

	$editor->set_default_stylesheet(array('style1.css','style2.css'));

	*/

	$editor->draw();

Example6. Snippets

	$editor = new rich('Example #6', 'rich_name', 'initial_content',
		500, 500, 'files/', 'http://www.yourdomain.com/files/');

	$snippets = array();
	$snippets[] = array('name'=>'Snippet 1 name', 'code'=>'Snippet 1 code');
	$snippets[] = array('name'=>'Snippet 2 name', 'code'=>'Snippet 2 code');
	$editor->set_snippets($snippets);

	$editor->draw();

Example7. Relative paths

	$editor = new rich('Example #7', 'rich_name', 'initial_content',
		500, 500, '/files/', '/files/', false, false);

	$editor->draw();

Example8. Language

	$editor = new rich('Example #8', 'rich_name', 'initial_content',
		'100%', 400, '/files/', '/files/', true, false);

	$editor->set_lang('ru'); //set language to russian

	$editor->draw();

6. License

Software License Agreement

RICH EDITOR AND ANY DOCUMENTATION PROVIDED TO YOU (COLLECTIVELY THE "SOFTWARE" OR "RE") COVERED BY THIS AGREEMENT IS COPYRIGHTED AND IS LICENSED, NOT SOLD. BY TAKING POSSESSION OF THE SOFTWARE, YOU AND YOUR COMPANY (COLLECTIVELY "YOU") ARE ACCEPTING AND AGREEING TO THE TERMS OF THIS LICENSE AGREEMENT

1. All copyrights to RE are exclusively owned by the author - Vyacheslav Smolin.

2. You agree to take reasonable steps to keep in confidence and protect the software provided to you from unauthorized copying or use. These steps include, without limitation, obtaining the agreement of all persons having access to the Software that they will respect the terms of this License and using the Software in such a way as to prevent unauthorized copying.

3. There are 2 basic types of licenses issued for the Software, these are:
a. General license. You may not use the Software to create content for third parties, or that will be linked to or framed by other web sites related to you in any way, including without limitation third parties' web sites created by you unless third parties have a separate license for the Software. You may not use the Software in your commercial products.

b. Rebrandable license. You may use the Software to create content for third parties, or in your commercial products. In this case you must provide obtaining the agreement of all third parties and your customers having access to the Software that they will respect the terms of this license and use the Software in such a way as to prevent unauthorized copying.

Once you paid a license fee, you are granted a non-exclusive right to use the Software only as authorized in this license. Number of servers and domains are not limited. All payments are non refundable. You may assign your right to use the Software to a third party provided that you cease using your licensed copy of the Software and the content produced by it.

4. THE SOFTWARE IS DISTRIBUTED "AS IS". NO WARRANTY OF ANY KIND IS EXPRESSED OR IMPLIED. YOU USE IT AT YOUR OWN RISK. NEITHER THE AUTHOR NOR THE AGENTS OF THE AUTHOR WILL BE LIABLE FOR DATA LOSS, DAMAGES, LOSS OF PROFITS OR ANY OTHER KIND OF LOSS WHILE USING OR MISUSING THIS SOFTWARE.

5. You may not sub-license, share, rent, or lease your right to use the Software. You also agree not to create derivative works of the Software for any reason. Any unauthorized use shall result in immediate and automatic termination of this license and may result in criminal and/or civil prosecution.

6. All copyright notices used throughout the Software, within the scripts and within the HTML that the scripts generate, must remain intact.

7. Installing and using the Software signifies acceptance of terms and conditions of the license.